<!DOCTYPE html>
<html lang="en">
<head>
    <title>动态发布系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!--md5-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
    <link rel="icon" href="image/icon/favicon.ico">
</head>
<body style="height: 1000px;" >
<div style="height: 20%"></div>
<div align="center">
    <div style="width:250px">

        <form class="form-horizontal" role="form" action="">

            <div class="form-group">
                <h1>分享新鲜事！</h1>
            </div>
            <div class="form-group">
                <div class="col-sm-12">
                    <input type="text" class="form-control" id="username" placeholder="请输入用户名">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-12">
                    <input type="password" class="form-control" id="password" placeholder="请输入密码">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-12">
                    <button style="width: 49%" type="button" class="btn btn-success" onclick="login()">登录</button>
                    <button style="width: 49%"  type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                        注册
                    </button>
                </div>
            </div>
        </form>

        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">用户注册</h4>
                    </div>
                    <div align="left" class="modal-body">
                        <div class="container">
                            <div style="width: 500px" class="row clearfix">
                                <div class="col-sm-6 column">
                                    <label>昵称</label><input id="rn" style="width: 200px" type="text" class="form-control"  />
                                </div>
                                <div class="col-sm-6 column">
                                    <label ><label style="color: red">*</label>用户名</label><input id="un"  style="width: 200px" type="text"
                                                                                        class="form-control"  />
                                </div>
                                <div class="col-sm-6 column">
                                    <label ><label style="color: red">*</label>密码</label><input id="pw1"  style="width: 200px" type="password" class="form-control"  />
                                </div>
                                <div class="col-sm-6 column">
                                    <label ><label style="color: red">*</label>再次输入密码</label><input id="pw2"  style="width: 200px" type="password" class="form-control"  />
                                </div>
                                <div class="col-sm-8 column">
                                    <label >个人介绍</label><textarea id="intro"  style="width: 300px" type="password" class="form-control" ></textarea>
                                </div>
                                <div class="col-sm-4 column">
                                    <div class="form-group">
                                        <label >选择头像</label><input id="file"  type="file" onchange="load(this)"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button onclick="regist()" type="button" class="btn btn-primary">提交注册</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var qian="/moments"
    var token;
    var formData=new FormData();
    function load(file){
        formData.delete('file')
        formData.append("file",file.files[0])
    }
    function regist(){
        formData.append("rn", $("#rn").val())
        formData.append("un",$("#un").val(),)
        formData.append("pw1",$("#pw1").val(),)
        formData.append("pw2", $("#pw2").val(),)
        formData.append("intro", $("#intro").val())
        $.ajax({
            url: qian+"/regist",
            data: formData,
            headers:{
                'Authorization':token
            },
            type:"POST",
            dataType: 'json',
            processData: false, // 告诉jQuery不要去处理发送的数据
            contentType: false, // 告诉jQuery不要去设置Content-Type请求头
            success: function (data) {
                if(data.code==200) {
                    alert(data.message)
                    window.location.href="./login.html"
                }
                else {
                    formData=new FormData();
                    alert(data.message)
                }
            },
            error:function (data){
                window.location.href="./login.html"
            }
        })
    }
    function login(){
        $.ajax({
            url:qian+"/loginin",
            data: {
                "username": $("#username").val(),
                "password": md5($("#password").val()),
            },
            headers:{
                'Authorization':token
            },
            type:"POST",
            success: function (data) {
                if(data.code==200) {
                    localStorage.setItem('token',data.obj.tokenHead+" "+data.obj.token)
                    window.location.href="./index.html"
                }
                else {
                    localStorage.setItem('token',"")
                    alert(data.message)
                }
            }
        })
    }
</script>
</body>
</html>